<template>
    <div class="footer">
        <div class="l-footer">
            <el-input :prefix-icon="Search" height="80%" type="textarea" resize="none" :rows="inputRows"
                v-model="message.msg" class="custom-input" placeholder="Please input" @keyup.enter="submitMessage" />
        </div>
        <div class="r-footer">
            <el-button @click="submitMessage" v-model="message.msg">
                <el-icon size="20">
                    <Promotion />
                </el-icon>
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from "vue";
import { Search } from '@element-plus/icons-vue'
import { useHeaderStore } from "../stores/header"
import { useWebSocketStore } from "../stores/websocket"
// import { useWebSocket } from '../hooks';


const ws = useWebSocketStore();
// const ws = useWebSocket(handleMessage);
const inputRows = ref(4);
const headerStore = useHeaderStore();
const message = ref({
    msg: "",
    sender: "me",
    type: headerStore.state.type,
    send_type: "friend",
    id: 0,
    friend_id: 1,
    ask_ids: [],
})


const submitMessage = () => {
    if (message.value.msg.trim() !== "") {
        if (headerStore.state.type === "friend"){
            console.log("发送好友消息", headerStore.state.type);
            ws.send({
                msg: message.value.msg,
                method: "send_friend",
                friend_id: headerStore.state.friend_id,
                id: headerStore.state.id,
            });
            message.value.msg = "";
        } else {
            console.log("发送群组消息", headerStore.state.type);
            ws.send({
                msg: message.value.msg,
                method: "send_group",
                id: headerStore.state.id,
            });
            message.value.msg = "";
        }
    }
}

onBeforeUnmount(() => {
    ws.disconnect();
});


</script>

<style lang="less" scoped>
.footer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.l-footer {
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

:deep(.el-input) {
    background-color: #3f3f3f !important;
    color: #fff;
    border: 0;
    border-radius: 3px;
}

:deep(.el-input__inner) {
    background-color: #3f3f3f !important;
    border: 0;
    color: #fff;
}

:deep(.el-input__wrapper) {
    background-color: #3f3f3f !important;
    border: 0;
    color: #fff;
}


.r-footer {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.custom-input {
    display: flex;
}
</style>